<template>
  <view class="cu-card dynamic no-card" v-if="item.id">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="'background-image:url('+item.user.avatarUrl+');'"></view>
						<view class="content flex-sub">
							<view>{{item.user.nickname}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.addtime}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					
					{{item.title}} 
				</view>

				<view class="grid flex-sub padding-lr col-1" >
					<image v-for="(pic,index) in item.pics" :key="index" style="width: 100%; margin-top: 5rpx;"  :src="pic+'?imageView2/2/w/1000'" mode="widthFix"></image>
				</view>
				
				<view class="text-gray text-sm text-right padding" v-if="item.pid==91">
					 
					 <view v-if="item.status == 1" class="cu-tag round bg-orange light">待处理 </view>
					<view v-if="item.status == 2" class="cu-tag round bg-olive light">已受理 </view>
					<view v-if="item.status == 3" class="cu-tag round bg-blue light">已关闭 </view>
				</view>
				 
				<view class="topic-content">
				<rich-text  :nodes="topicContent"></rich-text>
				</view>
				 

				<view class="cu-list menu-avatar comment solids-top" :key="index"  v-for="(comment,index) in commentList" >
					<view class="cu-item">
						<view class="cu-avatar round" :style="'background-image:url('+comment.avatarUrl+';'"></view>
						<view class="content">
							<view class="text-grey">{{comment.nickname}}</view>
							<view class="text-gray text-content text-df">
								{{comment.content}}
							</view>
							<view v-if="comment.comment" class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>{{comment.comment.user.nickname}}：</view>
									<view class="flex-sub">{{comment.comment.content}}</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">{{comment.time_tran}}</view>
								<view @click="addComment" :data-comment_id="comment.id">
									<!-- <text class="cuIcon-appreciatefill text-red"></text> -->
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>

					
				</view>
			</view>
			<view style="height: 120upx;"></view>			
			<view v-if="item.pid==91 && item.status!=3" class="fixed-btn cu-btn block bg-blue  lg"  @click="updateStatus">更新状态</view>
			<!-- <view  v-else="item.status!=3" class="fixed-btn cu-btn block bg-blue  lg"  @click="addComment">回复</view> -->
		</view>
	 
</template>


<script>
	import beeApp from '../../beeApp.js'
	import parseHtml from '../../util/html-parser.js'
	export default {
		data() {
			return {
				   item: {
                        user: {
                          nickname:''
                        },
						title:'',
						addtime:''
						
                    },
					isCard: false,
					topid_id:0,
                    goodlist: [],
                    good_text: "点赞",
                    publish_text: "确认提交",
                    placeholder: "",
                    commentList: [],
                    pager: {},
                    name: "moduleTopic",
                    page: 1,
                    community_id:0,
                    user_info: {  tenement_type:[]},
                    event: {},
					topicContent:'',
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		  },
		onLoad(option) {
          // beeApp.alert("yiqwyei");
		  
		  this.topid_id = option.id;
		  beeApp.getUserInfo((userInfo)=>{
			  this.userInfo = userInfo;
		  })
		   this.fetchData(); 
		},
		onShow:function(){
			var reload = beeApp.getPageData("pages/topic/detail","reload");
			if(reload==1){
				beeApp.setPageData("pages/topic/detail",{reload:0});
				this.fetchData();
			}
		},
		onReachBottom() {
			this.loadComment();
		},
		onPullDownRefresh() { 
			this.fetchData();
			uni.stopPullDownRefresh();
		},
		methods: {
			 fetchData: function() {
                    var _this = this;
                    // this.placeholder = this.$route.params.placeholder;
                    beeApp.api("sns/topic/detail", {
                        id: this.topid_id
                    }, function(res) {
                        if (res.code != 200) {
                            beeApp.alert(res.msg);
                            return;
                        }
                        var data = res.data;
                        if (data && data.id) {
                            _this.item = data;
                            _this.good_text = data.has_good ? "已赞" : "点赞";
                            _this.community_id = data.shop_id;
                        }
						var content = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
						
						_this.topicContent =parseHtml(content);
                    });
                    this.loadComment(1);
                     
                },
			addComment:function(e){
				var comment_id = e.currentTarget.dataset.comment_id;
				this.jumpToComment(comment_id);
			},	
		   loadComment: function(reload=0) {
                    //评论列表
                    var _this = this;
					if(reload==1){
						this.loading =0;
						this.lastpage =0;
						this.page =1;
						this.commentList=[];
					}
					if(this.loading==1 || _this.lastpage==1){
						return;
					}
					
					this.loading=1;
                    beeApp.api("sns/comment/get", {
                        pid: this.topid_id,
                        page: this.page,
                        limit: 20,
						order:'id desc'
                    }, function(res) {
						_this.loading=0;
                        if (res.code != 200) {
                            beeApp.alert(res.msg);
                            return;
                        }
                       
                        if (res.data.list.length === 0) {
                            _this.lastpage = 1;
                        }
                        _this.commentList = _this.commentList.concat(res.data.list);
                        _this.page++;
                    });
                },
				jumpToComment:function(comment_id=0){
					uni.navigateTo({
						url:'/pages/topic/addComment?pid='+this.topid_id+"&comment_id="+comment_id
					})
				},
				updateStatus:function(){
					var actList = [];
					var topic_id = this.topic_id
					var that = this;
					
					actList.push({
						name:'关闭',
						fun:function(topic_id){
							that.doUpdateStatus(3);
						}
					});
					if(this.item.user_id !=this.userInfo.user_id){
						actList.push({
							name:'回复',
							fun:function(topic_id){
								that.jumpToComment();
							}
						});
						if(this.item.status==1 ){
							actList.push({
							name:'接受处理',
							fun:function(topic_id){
								that.doUpdateStatus(2);
							}
							});
						}
					}
					
					
					var itemList = [];
					for(var i in actList){
						itemList.push(actList[i].name);
					}
					uni.showActionSheet({
						itemList: itemList,
						success: function (res) {
							var index = res.tapIndex;
							actList[index].fun(topic_id)
						},
						fail: function (res) {
							console.log(res.errMsg);
						}
					});
				},
				doUpdateStatus:function(status){
					var topic_id = this.topic_id;
					 var _this = this;
                    beeApp.api("sns/topic/updateStatus", {
                        id: this.topid_id,
						status:status,
                    }, function(res) {
                        if (res.code != 200) {
                            beeApp.alert(res.msg);
                            return;
                        }
						beeApp.setPageData("pages/user/topics",{reload:1});
						 beeApp.alert("操作成功");
						 _this.fetchData();
						
					})
				},
				
	   }
		
}
</script>


<style>
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{ border-bottom: none;}

</style>
